<ul class="menu-nav">
  <li (click)="toggleContent('home')" [ngClass]="{active: 'home' === active}">
    <a mdRipple routerLink="/"><i class="fa fa-home"></i></a>
  </li>
  <li (click)="toggleContent('documents')" [ngClass]="{active: 'documents' === active}">
    <a mdRipple><i class="fa fa-bookmark-o"></i></a>
  </li>
  <li (click)="toggleContent('messages')" [ngClass]="{active: 'messages' === active}">
    <a mdRipple><i class="fa fa-bell-o"></i></a>
  </li>
  <li *ngIf="layoutMenuService.documentId | async as docId" (click)="toggleContent('document')"
      [ngClass]="{active: 'document' === active}">
    <a mdRipple><i class="fa fa-file-pdf-o"></i></a>
  </li>
</ul>
<div class="menu-contents" [ngClass]="{active: contentsExpandStatus}">
  <div class="menu-content" [ngClass]="{active: 'documents' === active, current: 'documents' === current}">
    <div class="menu-content-title" mdRipple (click)="toggleContent('documents')">
      <span>{{'documents' | translate}}</span>
      <i class="fa fa-bars"></i>
    </div>
    <ul class="navigation-menu">
      <li>
        <a routerLink="/documents/my" mdRipple routerLinkActive="active">
          <i class="fa fa-bookmark-o"></i>
          <span>{{'myDocuments' | translate}}</span>
        </a>
      </li>
      <li>
        <a routerLink="/documents/viewed" mdRipple routerLinkActive="active">
          <i class="fa fa-bookmark-o"></i>
          <span>{{'viewedDocuments' | translate}}</span>
        </a>
      </li>
      <li>
        <a routerLink="/documents/uploaded" mdRipple routerLinkActive="active">
          <i class="fa fa-bookmark-o"></i>
          <span>{{'myUploadedDocuments' | translate}}</span>
        </a>
      </li>
      <li>
        <a routerLink="/documents/reviewed" mdRipple routerLinkActive="active">
          <i class="fa fa-bookmark-o"></i>
          <span>{{'myReviewedDocument' | translate}}</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="menu-content" [ngClass]="{active: 'messages' === active, current: 'messages' === current}">
    <div class="menu-content-title" mdRipple (click)="toggleContent('messages')">
      <span>{{'messages' | translate}}</span>
      <i class="fa fa-bars"></i>
    </div>
    <ul class="navigation-menu">
      <li>
        <a href="javascript:;" (click)="isReceivedCollapsed = !isReceivedCollapsed" mdRipple>
          <i class="fa fa-send"></i>
          <span>{{'received' | translate}}</span>
          <i class="collapsed-icon fa" [ngClass]="{'fa-angle-down': isReceivedCollapsed, 'fa-angle-up': !isReceivedCollapsed}"></i>
        </a>
        <ul class="sub-menu" [collapse]="isReceivedCollapsed">
          <li>
            <a routerLink="/messages/received-dpr" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentPermissionRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/received-dr" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/received-dhpr" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentHomepagePermissionRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/received-dosc" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentOwnershipChanges' | translate}}</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" (click)="isSentCollapsed = !isSentCollapsed" mdRipple>
          <i class="fa fa-send-o"></i>
          <span>{{'sent' | translate}}</span>
          <i class="collapsed-icon fa" [ngClass]="{'fa-angle-down': isSentCollapsed, 'fa-angle-up': !isSentCollapsed}"></i>
        </a>
        <ul class="sub-menu" [collapse]="isSentCollapsed">
          <li>
            <a routerLink="/messages/sent-dpr" mdRipple routerLinkActive="active">
              <span>{{'documentPermissionRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/sent-dr" mdRipple routerLinkActive="active">
              <span>{{'documentRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/sent-dhpr" mdRipple routerLinkActive="active">
              <span>{{'documentHomepagePermissionRequests' | translate}}</span>
            </a>
          </li>
          <li>
            <a routerLink="/messages/sent-dosc" mdRipple routerLinkActive="active">
              <span>{{'documentOwnershipChanges' | translate}}</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div *ngIf="layoutMenuService.documentId | async as docId" class="menu-content" [ngClass]="{active: 'document' === active, current: 'document' === current}">
    <div class="menu-content-title" mdRipple (click)="toggleContent('document')">
      <span>{{'document' | translate}}</span>
      <i class="fa fa-bars"></i>
    </div>
    <ul class="navigation-menu">
      <li>
        <a [routerLink]="['/documents', docId]" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{'home' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/documents', docId, 'versions']" routerLinkActive="active">{{'versions' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/documents', docId, 'views']" routerLinkActive="active">{{'views' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/documents', docId, 'events']" routerLinkActive="active">{{'events' | translate}}</a>
      </li>
      <li>
        <a href="javascript:;" (click)="isDocPermissionsCollapsed = !isDocPermissionsCollapsed" mdRipple>{{'premissions' | translate}}</a>
        <ul class="sub-menu" [collapse]="isDocPermissionsCollapsed">
          <li>
            <a [routerLink]="['/documents', docId, 'premissions-dp']" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentPermissions' | translate}}</span>
            </a>
          </li>
          <li>
            <a [routerLink]="['/documents', docId, 'premissions-dop']" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentOptionPermissions' | translate}}</span>
            </a>
          </li>
          <li>
            <a [routerLink]="['/documents', docId, 'premissions-dhp']" mdRipple routerLinkActive="active">
              <!--<i class="fa fa-bell-o"></i>-->
              <span>{{'documentHomepagePermissions' | translate}}</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a [routerLink]="['/documents', docId, 'people']" routerLinkActive="active">{{'people' | translate}}</a>
      </li>
      <li>
        <a [routerLink]="['/documents', docId, 'statistics']" routerLinkActive="active">{{'statistics' | translate}}</a>
      </li>
    </ul>
  </div>
</div>
